export let Vue;
import RouterLink from "./components/link.js";
import RouterView from "./components/view";

export default function install(_Vue) {
  Vue = _Vue;

  // 给所有组件都统一增加$router和$route属性
  Vue.mixin({
    beforeCreate() {
      // _router 共享给每个人
      // vuex: 父-store， 子-获取父的store， 孙子-获取子的store
      // vue-router: 我给根实例上增加一个_router属性
      // 所有人都拿到根上的_router

      // 路由的实例

      if (this.$options.router) {
        // 根组件
        this._router = this.$options.router;
        this._routerRoot = this; // 表示根组件上有一个唯一的表示叫_routerRoot 指向了自己

        // 初始化路由在哪里呢
        // 初始哈路由的逻辑， 只初始化一次
        this._router.init(this); // 整个应用的根
        // 路由实例
        // this._router.history.current
        // vuex中的state 在哪里使用就会收集对应的watcher
        // current里面的属性在哪里使用， 就会收集对应的watcher
        Vue.util.defineReactive(this, "_route", this._router.history.current);
      } else {
        // 子 孙子
        this._routerRoot = this.$parent && this.$parent._routerRoot;
      }
      // 所有组件都有 _routerRoot._router属性， 获取路由的实例
    },
  });

  // _routerRoot 是根实例，  根实例上有_router属性
  // 所有的组件都可以获取 根 _routerRoot， 获取属性是 _routerRoot._router

  // 我们使用$router时，不是使用的函数， 而是其中的属性， 比如param， query等
  // 所以定义的方式不采用Vue.prototype.$router, 而是采用defineProperty
  // 使用defineProperty的原因：给所有的组件统一增加$router和$route属性
  Object.defineProperty(Vue.prototype, "$router", {
    // 方法
    get() {
      return this._routerRoot._router;
    },
  });
  Object.defineProperty(Vue.prototype, "$route", {
    // 属性
    get() {
      return this._routerRoot._route;
    },
  });

  Vue.component("router-link", RouterLink);
  Vue.component("router-view", RouterView);

  // Vue.prototype.$router = function(){

  // }

  // Vue.prototype.$route =
}
